<template>
  <div class="search-wrap">
    <input
      type="text"
      :placeholder="placeholder"
      :maxlength="maxlength"
      :value="inputValue"
      @input="searchData($event)"
    />
  </div>
</template>

<script>
import { ref, computed, watch } from "vue";
import { useStore } from "vuex";
import { formatUserDate, getNowDate } from "@/libs/utils";

import getData from "@/services";
export default {
  name: "SearchInput",
  props: {
    placeholder: String,
    maxlength: Number,
  },
  setup(props) {
    const inputValue = ref(""),
      store = useStore(),
      state = store.state;

    const searchData = (e) => {
      inputValue.value = e.target.value;
      const field = computed(() => state.field).value;

      console.log(123, inputValue.value, field);

      if (inputValue.value.length === props.maxlength) {
        getData(store, field, formatUserDate(inputValue.value));
      } else if (inputValue.value.length === 0) {
        getData(store, field, getNowDate(field));
      }
    };

    watch(
      () => {
        return state.field;
      },
      () => {
        console.log(state.field);
        inputValue.value = "";
      }
    );

    return {
      inputValue,
      searchData,
    };
  },
};
</script>

<style lang="scss" scoped>
.search-wrap {
  height: 40px;
  width: 100%;
  border: 1px solid #acacac;
  input {
    width: 90%;
    padding-left: 1rem;
    line-height: 40px;
    font-size: 18px;
    border: none;
    outline: none;
    background: none;
  }
}
</style>
